<template>
  <div class="mod-user">
    <el-form :inline="true" :model="formData" label-width="100px" label-position="right">
      <el-form-item label="充电桩编号">
        <el-input @change="searchChange" v-model="formData.code" placeholder="充电桩编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="外壳编码">
        <el-input @change="searchChange" v-model="formData.shellId" placeholder="充电桩外壳编码" clearable></el-input>
      </el-form-item>
      <el-form-item label="片区名称">
        <el-input @change="searchChange" placeholder="片区名称" v-model="formData.chargingGroupName" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户手机号">
        <el-input @change="searchChange" placeholder="用户手机号" v-model="formData.mobile" clearable></el-input>
      </el-form-item>
      <el-form-item label="充电状态">
        <el-select v-model="formData.chargingStatus" @change="searchChange" clearable>
          <el-option v-for="(item, index) in chargingStatusList" :key="index" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input @change="searchChange" placeholder="订单编号" v-model="formData.orderNumber" clearable></el-input>
      </el-form-item>
      <el-form-item label="充电始/束">
        <el-date-picker v-model="formData.createDate" @change="searchChange" value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange" range-separator="至" start-placeholder="开始日期" :picker-options="pickerOptions"
          end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
        <el-button type="primary" size="small" @click.stop="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="sumary-list">
      <div>订单金额：{{ totalOrderAmount }}</div>
      <div>订单数量：{{ totalOrderCount }}</div>
      <div>消耗电量：{{ totalChargingElec }}</div>
      <div>退款金额总计：{{ totalRefundAmount }}</div>
    </div>
    <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :option="tableOption"
      @size-change="sizeChange" @current-change="currentChange">
      <template slot-scope="scope" slot="info">
        <div class="cell">
          <div>订单编号：<span>{{ scope.row.orderNumber }}</span></div>
          <div>充电开始时间：<span>{{ scope.row.createDate }}</span></div>
          <div>实际结束时间：<span>{{ scope.row.endDate }}</span></div>
          <div>下发时间：<span>{{ scope.row.totalChargingTime }}</span></div>
          <div>实际充电时长：<span>{{ scope.row.chargingTime }}(分钟)</span></div>
          <div>下发电量：<span>{{ scope.row.totalChargingElec }}</span></div>
          <div>消耗电量：<span>{{ scope.row.chargingElec }}</span></div>
          <div>下单用户手机号：<span>{{ scope.row.mobile }}</span></div>
          <div>所属运营商：<span>{{ scope.row.merchantName }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="districtInfo">
        <div class="cell">
          <div>片区名称：<span>{{ scope.row.chargingGroupName }}</span></div>
          <div>充电桩编号：<span>{{ scope.row.code }}</span></div>
          <div>插座编号：<span>{{ scope.row.socketCode }}</span></div>
          <div>外壳编号：<span>{{ scope.row.shellId }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="consumeInfo">
        <div class="cell">
          <div>应付金额：<span>{{ scope.row.amount }}</span></div>
          <div>实际支付金额：<span>{{ scope.row.actualAmount }}</span></div>
          <div>消费方式：<span>{{ scope.row.billingMethod }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="chargeMode">
        <div class="cell">
          <div>计费方式：<span>{{ scope.row.billingMethod }}</span></div>
          <div>计费规则：<span>{{ scope.row.chargingRule }}</span></div>
          <div>收费方式：<span>{{ scope.row.chargingMethod }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="refundInfo">
        <div class="cell">
          <div>是否退过款：<span>{{ scope.row.isRefund == 0 ? '否' : '是' }}</span></div>
          <div>订单实际支付金额：<span>{{ scope.row.actualAmount }}</span></div>
          <div>退款金额：<span>{{ scope.row.refundAmount }}</span></div>
          <div>退款原因：<span>{{ scope.row.refundReason }}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="primary" size="small" @click.stop="power_Click(scope.row.orderNumber)">功率图</el-button>
        <el-button v-if="scope.row.status == 4 && scope.row.isRefund == 0" style="margin-top: 5px" type="primary"
          size="small" @click.stop="refund_Click(scope.row)">退款</el-button>
      </template>
    </avue-crud>
    <power-diagram ref="powerDiagram" v-if="showPowerDiagram"></power-diagram>
    <order-refund ref="orderRefund" @refreshDataList="getDataList(page, formData)"></order-refund>
  </div>
</template>

<script>
import '@/utils/public'
import { tableOption } from '@/crud/order/orderList'
import powerDiagram from './powerDiagram'
import orderRefund from './orderRefund'
import { exportExcelCb } from '@/utils/index'
export default {
  components: {
    powerDiagram,
    orderRefund
  },
  data() {
    let nowDate = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1); //当前日期
    let nowMonth = nowDate.getMonth(); //当前月
    let nowYear = nowDate.getFullYear(); //当前年
    //本月的开始时间
    let monthStartDate = new Date(nowYear, nowMonth, 1);
    return {
      dataList: [],
      dataListLoading: false,
      showPowerDiagram: false,
      showOrderRefund: false,
      tableOption: tableOption,
      formData: {
        code: '',
        shellId: '',
        chargingGroupName: '',
        mobile: '',
        chargingStatus: '',
        orderNumber: '',
        chargingStartTime: monthStartDate.format('yyyy-MM-dd hh:mm:ss'),
        chargingEndTime: nowDate.format('yyyy-MM-dd hh:mm:ss'),
        createDate: [monthStartDate.format('yyyy-MM-dd hh:mm:ss'), nowDate.format('yyyy-MM-dd hh:mm:ss')],
        orderType: 0
      },
      chargingStatusList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '预充电',
          value: '0'
        },
        {
          label: '正在充电',
          value: '1'
        },
        {
          label: '未打开充电桩',
          value: '2'
        },
        {
          label: '充电失败',
          value: '3'
        },
        {
          label: '充电结束',
          value: '4'
        }
      ],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      options: [],
      props: {
        multiple: false,
        label: 'name',
        value: 'id',
        children: 'childs'
      },
      totalChargingElec: 0,
      totalOrderAmount: 0,
      totalOrderCount: 0,
      totalRefundAmount: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const start = new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 7)
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const start = new Date(nowYear, nowMonth, 1)
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
          }
        }, {
          text: '上个月',
          onClick(picker) {
            const end = new Date(new Date(new Date(nowYear, nowMonth, 0)).getTime() + 24 * 60 * 60 * 1000 - 1)
            const start = new Date(nowYear, nowMonth - 1, 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
          }
        }, {
          text: '上上月',
          onClick(picker) {
            const end = new Date(new Date(new Date(nowYear, nowMonth - 1, 0)).getTime() + 24 * 60 * 60 * 1000 - 1)
            const start = new Date(nowYear, nowMonth - 2, 1)
            picker.$emit('pick', [start.format('yyyy-MM-dd hh:mm:ss'), end.format('yyyy-MM-dd hh:mm:ss')])
          }
        }]
      }
    }
  },

  mounted() {
    this.getAreaList()
    this.getDataList(this.page, this.formData)
  },

  methods: {
    // 获取数据列表
    getDataList(page, params) {
      if (params.createDate == null || params.createDate.length == 0) {
        this.$message.error('日期不能为空')
        return
      } else {
        let start_date = new Date(params.createDate[0].replace(/-/g, "/"))
        let end_date = new Date(params.createDate[1].replace(/-/g, "/"))
        if (start_date.getYear() != end_date.getYear()) {
          this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
          return false
        }
        if (start_date.getMonth() != end_date.getMonth()) {
          this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
          return false
        }
      }
      console.log(params)
      if (params.createDate == null || params.createDate.length == 0) {
        this.$message.error('日期不能为空')
        return
      } else {
        let start_date = new Date(params.createDate[0].replace(/-/g, "/"))
        let end_date = new Date(params.createDate[1].replace(/-/g, "/"))
        if (start_date.getYear() != end_date.getYear()) {
          this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
          return false
        }
        if (start_date.getMonth() != end_date.getMonth()) {
          this.$message.error('仅支持查询单月，不支持跨年/跨月查询')
          return false
        }
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/order/list'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )
        )
      }).then(({ data }) => {
        console.log(data)
        this.dataList = data.data.orderList.records
        this.page.total = data.data.orderList.total
        this.totalOrderAmount = data.data.totalOrderAmount
        this.totalChargingElec = data.data.totalChargingElec
        this.totalOrderCount = data.data.totalOrderCount
        this.totalRefundAmount = data.data.totalRefundAmount
        this.dataListLoading = false
      })
    },


    getAreaList() {
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/system/get/all/region'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        this.options = data.data
      })
    },

    // 条件查询
    searchChange() {
      console.log(this.formData)
      if (this.formData.createDate && this.formData.createDate.length > 0) {
        this.formData.chargingStartTime = this.formData.createDate[0]
        this.formData.chargingEndTime = this.formData.createDate[1]
      }
      else {
        this.formData.chargingStartTime = ''
        this.formData.chargingEndTime = ''
      }
      this.page.currentPage = 1
      this.getDataList(this.page, this.formData)
    },

    power_Click(orderNumber) {
      this.showPowerDiagram = true
      this.$nextTick(() => {
        this.$refs['powerDiagram'].init(orderNumber)
      })
    },

    sizeChange(val) {
      this.page.pageSize = val
      this.getDataList(this.page, this.formData)
    },
    currentChange(val) {
      this.page.currentPage = val
      this.getDataList(this.page, this.formData)
    },
    refund_Click(row) {
      this.$refs['orderRefund'].init(row)
    },
    exportExcel() {
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/order/export'),
        method: 'get',
        params: this.$http.adornParams(this.formData),
        responseType: 'blob'
      }).then(({ data }) => {
        console.log(data)
        exportExcelCb(data, '电动自行车订单列表.xls')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cell {
  text-align: left;
}

.el-input {
  width: 200px;
}

.sumary-list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;

  div {
    height: 30px;
    padding: 0px 12px;
    line-height: 30px;
    border: solid 1px #009FF1;
    border-radius: 15px;
    margin-right: 10px;
  }

  div:hover {
    color: white;
    background-color: #009FF1;
  }
}
</style>
